<!DOCTYPE html> 
<html>
<head>
	<title>Grid Declaration Creation Test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
	<link rel='stylesheet' href="support/common.css" />
	<style type="text/css">
		#grid, #grid2 {
			width: 800px;
			height: 500px;
		}
	</style>

	<script type="text/javascript" src="../../dojo/dojo.js" 
		data-dojo-config="async: true, isDebug: true, parseOnLoad: true,  packages:[{name: 'gridx', location:'../gridx'}]"></script>
	<script type="text/javascript" src='support/common.js'></script>
	<script type="text/javascript" src='test_grid_declarative.js'></script>
	<script type="text/javascript">
		function func(rawData){
			return "<a href='http://www.google.com'>" + rawData.Artist + "</a>";
		}
	</script>
</head>
<body class='claro'>
	<h1 class='title' tabindex='0' onfocus='this.style.color="blue"' onblur='this.style.color=""'>
		Grid Declaration Creation Test
	</h1>
	<h3>Column layout is provided as an object</h3>
	<div id="grid" data-dojo-type="gridx.Grid" 
			data-dojo-id="grid"
			data-dojo-props="store: store,
				structure: dataSource.layouts[0],
				cacheClass: Cache,
				modules: [modules.VirtualVScroller]
			">
	</div>
	<br/>
<!--As a trend of HTML5 style attributes, we no longer support the following code:-->
	<h3>Column layout is declared in HTML</h3>
	<table id="grid2" data-dojo-type="gridx.Grid" 
			data-dojo-id="grid" 
			data-dojo-props="
				store: store,
				cacheClass: 'gridx/core/model/cache/Async',
				modules: [
					modules.CellWidget,
					modules.Edit,
					modules.VirtualVScroller
				]
			">
		<thead>
		<tr>
			<th field="id" width="100px" dataType="number">Index</th>
			<th field="Genre" width="auto" editable="false">Genre</th>
			<th field="Artist" width="auto" formatter="func">Artist</th>
			<th field="Year" width="auto" dataType="number">Year</th>
			<th field="Album" width="auto" editable="true">Album</th>
			<th field="Name" width="auto">Name</th>
			<th field="Length" width="auto">Length</th>
			<th field="Track" width="auto">Track</th>
			<th field="Composer" width="auto" dataType="boolean">Composer</th>
			<th field="Download Date" width="auto" dataType="date">Date</th>
			<th field="Last Played" width="auto" dataType="time">Last Played</th>
		</tr>
	</thead>
	</table>
</body>
</html>
